CSS ફ્લેક્સબોક્સ એડવાન્સ્ડ: અલાઈનમેન્ટ અને ડિસ્ટ્રિબ્યુશન તકનીકોમાં નિપુણતા

CSS ફ્લેક્સબોક્સે વેબ લેઆઉટમાં ક્રાંતિ લાવી છે, જે પેજ પર તત્વોને ગોઠવવાની એક શક્તિશાળી અને લવચીક રીત પૂરી પાડે છે. જ્યારે મૂળભૂત બાબતો પ્રમાણમાં સીધી છે, ત્યારે વૈશ્વિક પ્રેક્ષકોને અનુકૂળ આવે તેવા અત્યાધુનિક અને રિસ્પોન્સિવ ડિઝાઇન બનાવવા માટે એડવાન્સ્ડ અલાઈનમેન્ટ અને ડિસ્ટ્રિબ્યુશન તકનીકોમાં નિપુણતા મેળવવી મહત્વપૂર્ણ છે. આ વ્યાપક માર્ગદર્શિકા આ એડવાન્સ્ડ ખ્યાલોમાં ઊંડાણપૂર્વક જાય છે, જે તમને ફ્લેક્સબોક્સ નિષ્ણાત બનવામાં મદદ કરવા માટે વ્યવહારુ ઉદાહરણો અને આંતરદૃષ્ટિ પ્રદાન કરે છે.

ફ્લેક્સબોક્સ મોડેલને સમજવું

એડવાન્સ્ડ તકનીકોમાં ડૂબકી મારતા પહેલાં, ચાલો ફ્લેક્સબોક્સ મોડેલના મૂળભૂત ઘટકોને ફરીથી યાદ કરીએ:

• ફ્લેક્સ કન્ટેનર: પેરેન્ટ એલિમેન્ટ જેમાં ફ્લેક્સ આઇટમ્સ હોય છે. તેને display: flex અથવા display: inline-flex નો ઉપયોગ કરીને જાહેર કરવામાં આવે છે.
• ફ્લેક્સ આઇટમ્સ: ફ્લેક્સ કન્ટેનરના સીધા ચાઇલ્ડ એલિમેન્ટ્સ. આ આઇટમ્સ કન્ટેનર પર નિર્ધારિત પ્રોપર્ટીઝ અનુસાર ગોઠવાય છે.
• મુખ્ય અક્ષ (Main Axis): પ્રાથમિક અક્ષ જેની સાથે ફ્લેક્સ આઇટમ્સ ગોઠવાય છે. ડિફોલ્ટ રૂપે, તે આડી હોય છે (LTR ભાષાઓમાં ડાબેથી જમણે, RTL ભાષાઓમાં જમણેથી ડાબે).
• ક્રોસ અક્ષ (Cross Axis): મુખ્ય અક્ષને લંબરૂપ અક્ષ. ડિફોલ્ટ રૂપે, તે ઊભી હોય છે (ઉપરથી નીચે).

યાદ રાખવા જેવી મુખ્ય પ્રોપર્ટીઝ:

• flex-direction: મુખ્ય અક્ષની દિશા નિર્ધારિત કરે છે (row, column, row-reverse, column-reverse).
• justify-content: ફ્લેક્સ આઇટમ્સને મુખ્ય અક્ષની સાથે ગોઠવે છે (flex-start, flex-end, center, space-between, space-around, space-evenly).
• align-items: ફ્લેક્સ આઇટમ્સને ક્રોસ અક્ષની સાથે ગોઠવે છે (flex-start, flex-end, center, baseline, stretch).
• align-content: જ્યારે ક્રોસ અક્ષમાં વધારાની જગ્યા હોય ત્યારે ફ્લેક્સ લાઇન કેવી રીતે ગોઠવાય છે તે નિયંત્રિત કરે છે (જ્યારે flex-wrap: wrap નો ઉપયોગ થાય ત્યારે લાગુ પડે છે). મૂલ્યો justify-content જેવા જ છે.
• flex-wrap: ફ્લેક્સ આઇટમ્સ બહુવિધ લાઇનમાં આવવી જોઈએ કે નહીં તે સ્પષ્ટ કરે છે (nowrap, wrap, wrap-reverse).

એડવાન્સ્ડ અલાઈનમેન્ટ તકનીકો

1. વ્યક્તિગત આઇટમના અલાઈનમેન્ટ માટે align-self નો ઉપયોગ

જ્યારે align-items કન્ટેનરમાં બધી ફ્લેક્સ આઇટમ્સના અલાઈનમેન્ટને નિયંત્રિત કરે છે, ત્યારે align-self તમને વ્યક્તિગત આઇટમ્સ માટે આ અલાઈનમેન્ટને ઓવરરાઇડ કરવાની મંજૂરી આપે છે. આ લેઆઉટ પર ઝીણવટભર્યું નિયંત્રણ પૂરું પાડે છે.

ઉદાહરણ:

            .container {
  display: flex;
  align-items: center; /* Default alignment for all items */
  height: 200px;
}

.item1 {
  align-self: flex-start; /* Override alignment for item1 */
}

.item2 {
  align-self: flex-end; /* Override alignment for item2 */
}

            

              
                Copy
              
            
          

આ કોડ item1 ને કન્ટેનરની ટોચ પર, item2 ને તળિયે, અને બાકીની આઇટમ્સ (જો કોઈ હોય તો) ને કેન્દ્રમાં ગોઠવશે.

ઉપયોગનો કેસ: આ ખાસ કરીને નેવિગેશન બાર અથવા પ્રોડક્ટ કાર્ડમાં ચોક્કસ તત્વોને ગોઠવવા માટે ઉપયોગી છે, જે દ્રશ્ય વંશવેલો અને સંતુલન સુનિશ્ચિત કરે છે.

2. align-items: baseline સાથે બેઝલાઇન અલાઈનમેન્ટ

align-items: baseline ફ્લેક્સ આઇટમ્સને તેમના ટેક્સ્ટ કન્ટેન્ટની બેઝલાઇનના આધારે ગોઠવે છે. આ ખાસ કરીને જ્યારે અલગ-અલગ ફોન્ટ સાઇઝ અથવા લાઇન હાઇટ ધરાવતી આઇટમ્સ સાથે કામ કરતી વખતે મદદરૂપ થાય છે, જે સુનિશ્ચિત કરે છે કે ટેક્સ્ટ દૃષ્ટિની રીતે સુખદ રીતે ગોઠવાયેલું છે.

ઉદાહરણ:

            .container {
  display: flex;
  align-items: baseline;
}

.item1 {
  font-size: 20px;
}

.item2 {
  font-size: 30px;
}

            

              
                Copy
              
            
          

આ ઉદાહરણમાં, આઇટમ્સ તેમના ફોન્ટ સાઇઝને ધ્યાનમાં લીધા વિના, તેમના ટેક્સ્ટની બેઝલાઇનના આધારે ગોઠવવામાં આવશે.

ઉપયોગનો કેસ: ફોર્મમાં ઇનપુટ ફીલ્ડ્સ સાથે ટેક્સ્ટ લેબલ્સને ગોઠવવા, અથવા બ્લોગ પોસ્ટમાં વર્ણનો સાથે શીર્ષકોને ગોઠવવા.

3. તત્વોને સંપૂર્ણપણે કેન્દ્રિત કરવું

તત્વોને આડા અને ઊભા બંને રીતે કેન્દ્રિત કરવું એ એક સામાન્ય જરૂરિયાત છે. ફ્લેક્સબોક્સ આને અત્યંત સરળ બનાવે છે:

            .container {
  display: flex;
  justify-content: center; /* Horizontal centering */
  align-items: center; /* Vertical centering */
  height: 200px; /* Optional: Set a height for vertical centering to work */
}

            

              
                Copy
              
            
          

આ કોડ ફ્લેક્સ આઇટમને કન્ટેનરમાં આડા અને ઊભા બંને રીતે કેન્દ્રિત કરશે.

ઉપયોગનો કેસ: મોડલ વિન્ડો, લોડિંગ સ્પિનર્સ અથવા સ્વાગત સંદેશાઓને કેન્દ્રિત કરવા.

4. align-items: stretch માટે ક્રોસ-બ્રાઉઝર સુસંગતતાને સંબોધવી

જ્યારે align-items: stretch એ ફ્લેક્સ આઇટમ્સ માટે ડિફોલ્ટ વર્તન છે, કેટલાક જૂના બ્રાઉઝર્સ તેને યોગ્ય રીતે રેન્ડર કરી શકતા નથી. ક્રોસ-બ્રાઉઝર સુસંગતતા સુનિશ્ચિત કરવા માટે, તેને સ્પષ્ટપણે જાહેર કરો:

            .container {
  display: flex;
  align-items: stretch; /* Explicitly declare stretch */
}

            

              
                Copy
              
            
          

ઉપયોગનો કેસ: એ સુનિશ્ચિત કરવું કે ફ્લેક્સ આઇટમ્સ બધા બ્રાઉઝર્સમાં ક્રોસ અક્ષ પર ઉપલબ્ધ જગ્યા ભરે, જે એક સુસંગત લેઆઉટ અનુભવ બનાવે છે.

એડવાન્સ્ડ ડિસ્ટ્રિબ્યુશન તકનીકો

1. space-between, space-around, અને space-evenly નો ઉપયોગ

justify-content પ્રોપર્ટી મુખ્ય અક્ષ પર જગ્યાના વિતરણ માટે ઘણા મૂલ્યો પ્રદાન કરે છે:

• space-between: આઇટમ્સ વચ્ચે સમાનરૂપે જગ્યાનું વિતરણ કરે છે, જેમાં પ્રથમ આઇટમ શરૂઆતમાં અને છેલ્લી આઇટમ અંતમાં ગોઠવાય છે.
• space-around: આઇટમ્સની આસપાસ સમાનરૂપે જગ્યાનું વિતરણ કરે છે, જેમાં કન્ટેનરના બંને છેડે અડધી જગ્યા હોય છે.
• space-evenly: આઇટમ્સ અને કન્ટેનરની કિનારીઓ વચ્ચે સમાનરૂપે જગ્યાનું વિતરણ કરે છે.

ઉદાહરણ:

            .container {
  display: flex;
  justify-content: space-between; /* Distribute space between items */
}

            

              
                Copy
              
            
          

ઉપયોગનો કેસ: સમાનરૂપે અંતરવાળી લિંક્સ સાથે નેવિગેશન બાર બનાવવું, ગેલેરીમાં થંબનેલ્સનું વિતરણ કરવું, અથવા ગ્રીડમાં પ્રોડક્ટ સુવિધાઓને ગોઠવવી.

2. લવચીક સાઇઝિંગ માટે flex-grow, flex-shrink, અને flex-basis ને જોડવું

flex પ્રોપર્ટી flex-grow, flex-shrink, અને flex-basis માટે એક શોર્ટકટ છે. આ પ્રોપર્ટીઝ નિયંત્રિત કરે છે કે ફ્લેક્સ આઇટમ્સ ઉપલબ્ધ જગ્યા ભરવા માટે કેવી રીતે વધે છે અથવા સંકોચાય છે.

• flex-grow: સ્પષ્ટ કરે છે કે કન્ટેનરમાં અન્ય ફ્લેક્સ આઇટમ્સની તુલનામાં આઇટમ કેટલી વધવી જોઈએ.
• flex-shrink: સ્પષ્ટ કરે છે કે કન્ટેનરમાં અન્ય ફ્લેક્સ આઇટમ્સની તુલનામાં આઇટમ કેટલી સંકોચાવી જોઈએ.
• flex-basis: કોઈપણ વૃદ્ધિ અથવા સંકોચન થાય તે પહેલાં આઇટમનું પ્રારંભિક કદ સ્પષ્ટ કરે છે.

ઉદાહરણ:

            .item1 {
  flex: 1; /* Equivalent to flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
}

.item2 {
  flex: 2; /* Equivalent to flex-grow: 2, flex-shrink: 1, flex-basis: 0 */
}

            

              
                Copy
              
            
          

આ ઉદાહરણમાં, item2 ઉપલબ્ધ જગ્યા ભરવા માટે item1 કરતાં બમણું વધશે.

ઉપયોગનો કેસ: એક રિસ્પોન્સિવ લેઆઉટ બનાવવું જ્યાં સ્ક્રીન સાઇઝના આધારે અમુક તત્વો અન્ય કરતાં વધુ જગ્યા લે. એક સામાન્ય ઉપયોગ એ છે કે સાઇડબાર મોટી સ્ક્રીન પર 1/3 જગ્યા લે અને કન્ટેન્ટ 2/3 જગ્યા લે, પરંતુ નાની મોબાઇલ સ્ક્રીન પર ઊભી રીતે સ્ટેક થાય.

3. આઇટમ પ્લેસમેન્ટને નિયંત્રિત કરવા માટે order નો ઉપયોગ

order પ્રોપર્ટી તમને મૂળભૂત HTML માળખાને અસર કર્યા વિના ફ્લેક્સ આઇટમ્સનો દ્રશ્ય ક્રમ બદલવાની મંજૂરી આપે છે. આઇટમ્સ તેમના order મૂલ્યના આધારે ચડતા ક્રમમાં ગોઠવાય છે. ડિફોલ્ટ મૂલ્ય 0 છે.

ઉદાહરણ:

            .item1 {
  order: 2;
}

.item2 {
  order: 1;
}

            

              
                Copy
              
            
          

આ ઉદાહરણમાં, item2 item1 પહેલાં દેખાશે, ભલે તે HTML માં પાછળથી આવતું હોય.

ઉપયોગનો કેસ: વિવિધ સ્ક્રીન સાઇઝ માટે તત્વોને ફરીથી ક્રમમાં ગોઠવવા, જેમ કે સારી સુલભતા માટે મોબાઇલ ઉપકરણો પર સાઇડબારને ટોચ પર ખસેડવું.

4. બહુ-લાઇન લેઆઉટ માટે flex-wrap અને align-content ને હેન્ડલ કરવું

જ્યારે flex-wrap: wrap નો ઉપયોગ થાય છે, ત્યારે ફ્લેક્સ આઇટમ્સ બહુવિધ લાઇનમાં આવી શકે છે. align-content પ્રોપર્ટી પછી નિયંત્રિત કરે છે કે આ લાઇનો ક્રોસ અક્ષ પર કેવી રીતે ગોઠવાય છે. તેના મૂલ્યો `justify-content` (flex-start, flex-end, center, space-between, space-around, space-evenly, અને stretch) ને પ્રતિબિંબિત કરે છે.

ઉદાહરણ:

            .container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  height: 400px;
}

            

              
                Copy
              
            
          

આ ફ્લેક્સ લાઇન્સને ક્રોસ અક્ષ પર સમાનરૂપે વિતરિત કરશે, જેમાં પ્રથમ લાઇન ટોચ પર અને છેલ્લી લાઇન તળિયે હશે.

ઉપયોગનો કેસ: એક રિસ્પોન્સિવ ગ્રીડ લેઆઉટ બનાવવું જ્યાં આઇટમ્સ જરૂર મુજબ નવી લાઇનમાં આવે, અને લાઇનો ઉપલબ્ધ જગ્યા ભરવા માટે સમાનરૂપે વિતરિત થાય.

વૈશ્વિક પ્રેક્ષકો માટે વ્યવહારુ ઉદાહરણો

1. રિસ્પોન્સિવ નેવિગેશન બાર

એક નેવિગેશન બાર જે વિવિધ સ્ક્રીન સાઇઝને અનુકૂળ થાય છે તે વૈશ્વિક પ્રેક્ષકો માટે આવશ્યક છે. ફ્લેક્સબોક્સનો ઉપયોગ કરીને તેને કેવી રીતે બનાવવું તે અહીં છે:

            .navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #f0f0f0;
}

.navbar-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar-links li {
  margin-left: 20px;
}

/* For smaller screens, stack the links vertically */
@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .navbar-links {
    flex-direction: column;
    margin-top: 10px;
  }

  .navbar-links li {
    margin-left: 0;
    margin-bottom: 10px;
  }
}

            

              
                Copy
              
            
          

આ ઉદાહરણ નાની સ્ક્રીન પર નેવિગેશન લિંક્સને ઊભી રીતે સ્ટેક કરવા માટે મીડિયા ક્વેરીમાં flex-direction: column નો ઉપયોગ કરે છે, જે મોબાઇલ ઉપકરણો પર વધુ સારો વપરાશકર્તા અનુભવ પ્રદાન કરે છે.

2. પ્રોડક્ટ કાર્ડ લેઆઉટ

પ્રોડક્ટ કાર્ડ્સ ઈ-કોમર્સ વેબસાઇટ્સમાં એક સામાન્ય તત્વ છે. ફ્લેક્સબોક્સનો ઉપયોગ દૃષ્ટિની આકર્ષક અને રિસ્પોન્સિવ લેઆઉટ બનાવવા માટે કરી શકાય છે:

            .product-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  padding: 10px;
}

.product-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.product-details {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.product-title {
  font-size: 1.2em;
  margin-bottom: 5px;
}

.product-price {
  font-weight: bold;
}

.product-button {
  background-color: #007bff;
  color: white;
  padding: 10px;
  border: none;
  cursor: pointer;
}

            

              
                Copy
              
            
          

આ ઉદાહરણ ઉત્પાદનની છબી, વિગતો અને બટનને ઊભી રીતે સ્ટેક કરવા માટે flex-direction: column નો ઉપયોગ કરે છે. શીર્ષક, કિંમત અને બટન વચ્ચે જગ્યાનું વિતરણ કરવા માટે justify-content: space-between નો ઉપયોગ થાય છે, જે સુનિશ્ચિત કરે છે કે તે સમાનરૂપે અંતરે છે.

3. લવચીક ફોર્મ લેઆઉટ

વપરાશકર્તાની ક્રિયાપ્રતિક્રિયા માટે ફોર્મ્સ મહત્વપૂર્ણ છે. ફ્લેક્સબોક્સનો ઉપયોગ લવચીક અને સુલભ ફોર્મ લેઆઉટ બનાવવા માટે કરી શકાય છે:

            .form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.form-label {
  margin-bottom: 5px;
}

.form-input {
  padding: 10px;
  border: 1px solid #ccc;
}

/* For wider screens, arrange labels and inputs horizontally */
@media (min-width: 769px) {
  .form-group {
    flex-direction: row;
    align-items: center;
  }

  .form-label {
    width: 120px;
    margin-right: 10px;
  }
}

            

              
                Copy
              
            
          

આ ઉદાહરણ પહોળી સ્ક્રીન પર લેબલ્સ અને ઇનપુટ્સને આડા ગોઠવવા માટે મીડિયા ક્વેરીમાં flex-direction: row નો ઉપયોગ કરે છે, જે વાંચનક્ષમતા અને ઉપયોગિતામાં સુધારો કરે છે.

RTL (જમણે-થી-ડાબે) વિચારણાઓ

જ્યારે અરબી, હીબ્રુ અને ફારસી જેવી ભાષાઓ માટે ડિઝાઇન કરવામાં આવે છે, જે જમણેથી ડાબે લખાય છે, ત્યારે RTL લેઆઉટને ધ્યાનમાં લેવું મહત્વપૂર્ણ છે. ફ્લેક્સબોક્સ આપોઆપ RTL મોડમાં લેઆઉટને મિરર કરે છે, પરંતુ દૃષ્ટિની આકર્ષક ડિઝાઇન સુનિશ્ચિત કરવા માટે તમારે કેટલાક ગોઠવણો કરવાની જરૂર પડી શકે છે.

RTL મોડને સક્ષમ કરવા માટે ફ્લેક્સ કન્ટેનર પર direction: rtl પ્રોપર્ટીનો ઉપયોગ કરો.

            .container {
  display: flex;
  direction: rtl; /* Enable RTL mode */
}

            

              
                Copy
              
            
          

RTL માટે ડિઝાઇન કરતી વખતે આ મુદ્દાઓ ધ્યાનમાં લો:

• જો જરૂરી હોય તો order પ્રોપર્ટીનો ઉપયોગ કરીને તત્વોનો ક્રમ ઉલટાવો.
• મિરર થયેલ લેઆઉટને ધ્યાનમાં લેવા માટે માર્જિન અને પેડિંગને સમાયોજિત કરો.
• વધુ સારી RTL સપોર્ટ માટે margin-left અને margin-right ને બદલે margin-inline-start અને margin-inline-end જેવી લોજિકલ પ્રોપર્ટીઝનો ઉપયોગ કરો.

સુલભતા વિચારણાઓ

જ્યારે ફ્લેક્સબોક્સ દ્રશ્ય લવચીકતા પૂરી પાડે છે, ત્યારે એ સુનિશ્ચિત કરવું મહત્વપૂર્ણ છે કે તમારા લેઆઉટ વિકલાંગ વપરાશકર્તાઓ માટે સુલભ છે. આ મુદ્દાઓ ધ્યાનમાં લો:

• તમારા કન્ટેન્ટને માળખું અને અર્થ પ્રદાન કરવા માટે સિમેન્ટિક HTML તત્વોનો ઉપયોગ કરો.
• ખાતરી કરો કે તત્વોનો દ્રશ્ય ક્રમ HTML માં તાર્કિક ક્રમ સાથે મેળ ખાય છે, અથવા ફોકસ ક્રમને નિયંત્રિત કરવા માટે tabindex એટ્રિબ્યુટનો ઉપયોગ કરો.
• ટેક્સ્ટ અને પૃષ્ઠભૂમિ રંગો વચ્ચે પૂરતો કોન્ટ્રાસ્ટ પ્રદાન કરો.
• તમારા લેઆઉટને સ્ક્રીન રીડર્સ જેવી સહાયક તકનીકો સાથે પરીક્ષણ કરો.

ફ્લેક્સબોક્સ લેઆઉટ્સનું ડિબગીંગ

ફ્લેક્સબોક્સ લેઆઉટ્સનું ડિબગીંગ ક્યારેક પડકારજનક હોઈ શકે છે. અહીં કેટલીક મદદરૂપ ટિપ્સ છે:

• ફ્લેક્સ કન્ટેનર અને ફ્લેક્સ આઇટમ્સનું નિરીક્ષણ કરવા માટે બ્રાઉઝર ડેવલપર ટૂલ્સનો ઉપયોગ કરો.
• justify-content, align-items, અને align-content માટે વિવિધ મૂલ્યો સાથે પ્રયોગ કરો જેથી તેઓ લેઆઉટને કેવી રીતે અસર કરે છે તે જોઈ શકાય.
• ફ્લેક્સ આઇટમ્સની સીમાઓને વિઝ્યુઅલાઈઝ કરવા માટે outline પ્રોપર્ટીનો ઉપયોગ કરો.
• વિગતવાર માહિતી માટે ફ્લેક્સબોક્સ સ્પષ્ટીકરણ અને ઓનલાઇન સંસાધનોનો સંપર્ક કરો.

નિષ્કર્ષ

એડવાન્સ્ડ ફ્લેક્સબોક્સ અલાઈનમેન્ટ અને ડિસ્ટ્રિબ્યુશન તકનીકોમાં નિપુણતા મેળવવી એ વૈશ્વિક પ્રેક્ષકો માટે રિસ્પોન્સિવ, દૃષ્ટિની આકર્ષક અને સુલભ લેઆઉટ બનાવવા માટે આવશ્યક છે. ફ્લેક્સબોક્સ મોડેલને સમજીને, align-self, space-between, flex-grow, અને order જેવી પ્રોપર્ટીઝનો ઉપયોગ કરીને, અને RTL અને સુલભતાને ધ્યાનમાં લઈને, તમે અત્યાધુનિક અને વપરાશકર્તા-મૈત્રીપૂર્ણ વેબ ડિઝાઇન બનાવી શકો છો જે વિવિધ જરૂરિયાતો અને પસંદગીઓને પૂર્ણ કરે છે. ફ્લેક્સબોક્સની લવચીકતાને અપનાવો અને તમારી વેબ ડેવલપમેન્ટ કુશળતાને નવી ઊંચાઈઓ પર લઈ જાઓ.

વધુ શીખવા માટેના સંસાધનો

• MDN Web Docs: CSS Flexible Box Layout
• CSS-Tricks: A Complete Guide to Flexbox
• Flexbox Froggy: A game for learning CSS flexbox